<template>
  <div class="container-fluid bind-info">
    <h-header :show-menus="false"></h-header>
    <h-container>
      <div class="register">
        <el-tabs type="card">
          <el-tab-pane label="注册新用户">
            <el-card class="box-card">
              <el-form :model="customer" labelPosition="top" :rules="rules" ref="form" class="custom-form">
                <el-form-item label="用户名" prop="userName">
                  <el-row :gutter="20">
                    <el-col :span="left">
                      <el-input v-model="customer.userName" placeholder="请输入用户名"></el-input>
                    </el-col>
                    <el-col :span="right"><span class="red">登录系统的账号可以使用QQ号，微信号等并在交流群内备注用户名</span>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="昵称" prop="nickName">
                  <el-row :gutter="20">
                    <el-col :span="left">
                      <el-input v-model="customer.nickName" placeholder="请输入昵称"></el-input>
                    </el-col>
                    <el-col :span="right"><span class="red">用来显示的名称最好和交流群内的昵称一致</span>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="头像">
                  <el-row :gutter="20">
                    <el-col :span="left">
                      <h-upload :files="files">
                        <el-button owner="avatar" type="primary">上传头像</el-button>
                      </h-upload>
                    </el-col>
                    <el-col :span="right"><span>用来展示的用户头像</span>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="账户密码" prop="password">
                  <el-row :gutter="20">
                    <el-col :span="left">
                      <el-input type="password" v-model="customer.password"
                                placeholder="请输入用户密码"></el-input>
                    </el-col>
                    <el-col :span="right">
                      <span>请输入不少于8位的数字、字符等组合</span>
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item label="重复密码" prop="repassword">
                  <el-row :gutter="20">
                    <el-col :span="left">
                      <el-input type="password" v-model="customer.repassword"
                                placeholder="请再次输入用户密码"></el-input>
                    </el-col>
                    <el-col :span="right">
                      <span>输入重复密码和密码保持一致</span>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="邮箱地址" prop="email">
                  <el-row :gutter="20">
                    <el-col :span="left">
                      <el-input v-model="customer.email" placeholder="请输入邮箱地址"></el-input>
                    </el-col>
                    <el-col :span="right"><span>输入邮箱地址,将用来接收到货等信息</span>
                    </el-col>
                  </el-row>
                </el-form-item>
                <div style="margin-top: 18px">
                  <el-button type="primary" @click="register"> 提交注册</el-button>
                </div>
              </el-form>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="绑定已有用户">
            <el-card class="box-card bind">
              <el-form :model="customer" labelPosition="top" :rules="rules" ref="bind" class="custom-form">
                <el-form-item label="用户名" prop="userName">
                  <el-row :gutter="20">
                    <el-col :span="left">
                      <el-input prefixIcon="icon icon-person" v-model="customer.userName"
                                placeholder="请输入用户名,可以是QQ号"></el-input>
                    </el-col>
                    <el-col :span="right"><span>请输入已有的账户名</span>
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item label="账户密码" prop="password">
                  <el-row :gutter="20">
                    <el-col :span="left">
                      <el-input type="password" prefixIcon="icon icon-locked"
                                v-model="customer.password"
                                placeholder="请输入用户密码"></el-input>
                    </el-col>
                    <el-col :span="right">
                      <span>请输入密码</span>
                    </el-col>
                  </el-row>
                </el-form-item>

                <div style="margin-top: 18px">
                  <el-button type="primary" @click="bindSubmit"><i class="fa fa-save"></i> 提交绑定</el-button>
                </div>
              </el-form>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
    </h-container>
    <h-footer/>
  </div>
</template>

<script>
  import FrontService from 'src/service/front'
  import HUpload from 'src/components/common/HUpload'
  import HHeader from "../layout/Header";
  import HFooter from "../layout/Footer";
  import HContainer from "../layout/Container";

  export default {
    name: 'FrontBind',
    components: {
      HContainer,
      HFooter,
      HHeader,
      HUpload
    },
    data() {
      const checkPassword = (rule, value, callback) => {
        if (value == null) {
          callback(new Error('请再次输入密码!'))
        } else {
          if (this.customer.password !== value) {
            callback(new Error('两次输入的密码不一致!'))
          } else {
            callback()
          }
        }
      }
      return {
        files: [],
        left: 12,
        right: 12,
        customer: {
          id: null,
          status: 1,
          userName: '',
          nickName: '',
          type: 2,
          birthday: '',
          sex: '',
          email: '',
          qq: '',
          weixin: '',
          figureUrl: '',
          repassword: ''
        },
        rules: {
          userName: [
            {required: true, message: '请输入用户名称', trigger: 'blur'},
            {min: 5, message: '最少5个字符', trigger: 'blur'}
          ],
          district: [
            {required: true, message: '请选择所在的城市', trigger: 'blur'}
          ],
          address: [
            {required: true, message: '请输入详细地址', trigger: 'blur'},
            {min: 1, message: '请输入详细地址', trigger: 'blur'}
          ],
          mobile: [
            {required: true, message: '请输入联系电话', trigger: 'blur'},
          ],
          name: [
            {required: true, message: '请输入收件人的称呼', trigger: 'blur'}
          ],
          nickName: [
            {required: true, message: '请输入昵称', trigger: 'blur'},
            {min: 2, message: '最少2个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入用户密码', trigger: 'blur'}

          ],
          repassword: [
            {required: true, message: '请再次输入密码', trigger: 'blur'},
            {validator: checkPassword, trigger: 'blur'}
          ],
          email: [
            {required: true, message: '请输入邮箱地址', trigger: 'blur'},
            {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change'}]
        }
      }
    },
    methods: {
      register: function () {
        const me = this
        if (me.files.length > 0) {
          me.customer.figureUrl = me.files[0].url
        }
        this.$refs['form'].validate((valid) => {
          if (valid) {
            FrontService.bindNew(me.customer).then(function (data) {
              if (data != null) {
                me.$message.success('绑定用户成功!')
                setTimeout(function () {
                  window.location.href = '/shop/index.html'
                }, 600)
              }
            })
          } else {
            return false
          }
        })
      },
      bindSubmit: function () {
        const me = this
        if (me.files.length > 0) {
          me.customer.figureUrl = me.files[0].url;
        }
        this.$refs['bind'].validate((valid) => {
          if (valid) {
            FrontService.bindExist(me.customer).then(function (data) {
              if (data != null) {
                me.$message.success('绑定用户成功!')
                setTimeout(function () {
                  window.location.href = '/shop/index.html'
                }, 600)
              }
            })
          } else {
            return false
          }
        })
      }
    },
    mounted: function () {
      FrontService.bindInfo().then(rs => {
        if (rs != null) {
          const data = rs.datas[0]//处理第三方用户信息
          this.customer.nickName = data.nickName
          this.files = []
          this.files.push({
              uid: (Date.now() + this.tempIndex++),
              status: 'success',
              url: data.img
            }
          )
          this.customer.figureUrl = data.img
        }
      })
    }
  }
</script>
